<template>
  <div class="skin-archive-container">
    <div class="header">
      <h3>皮肤档案</h3>
    </div>
    <el-card class="section-card">
      <h4>皮肤基本信息</h4>
      <el-form :model="skinInfo" label-position="top">
        <el-form-item label="皮肤类型">
          <el-select v-model="skinInfo.type" placeholder="请选择皮肤类型">
            <el-option label="油性" value="油性" />
            <el-option label="干性" value="干性" />
            <el-option label="混合性" value="混合性" />
            <el-option label="敏感性" value="敏感性" />
            <el-option label="正常" value="正常" />
          </el-select>
        </el-form-item>
        <el-form-item label="常见皮肤问题">
          <el-checkbox-group v-model="skinInfo.problems">
            <el-checkbox label="痤疮" />
            <el-checkbox label="湿疹" />
            <el-checkbox label="敏感" />
            <el-checkbox label="色斑" />
            <el-checkbox label="干燥脱屑" />
            <el-checkbox label="无明显问题" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="皮肤过敏史">
          <el-input v-model="skinInfo.allergy" placeholder="如有过敏史请填写，无则留空" />
        </el-form-item>
        <el-form-item label="常用护肤品">
          <el-input v-model="skinInfo.products" placeholder="如：洁面、保湿、修复、药膏等" />
        </el-form-item>
        <el-form-item label="皮肤照片（可选）">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-change="handlePhotoChange">
            <img v-if="skinInfo.photoUrl" :src="skinInfo.photoUrl" class="skin-photo" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSkinInfo">保存档案</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="section-card" style="margin-top: 24px;">
      <h4>皮肤问题历史记录</h4>
      <el-timeline>
        <el-timeline-item v-for="(item, idx) in historyList" :key="idx" :timestamp="item.date" placement="top">
          <el-card>
            <div class="history-content">
              <span>{{ item.desc }}</span>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

const skinInfo = reactive({
  type: '',
  problems: [],
  allergy: '',
  products: '',
  photoUrl: ''
})

const historyList = ref([
  { date: '2024-05-01', desc: '面部出现痤疮，使用水杨酸凝胶后好转。' },
  { date: '2024-04-15', desc: '换季时皮肤干燥脱屑，增加保湿后改善。' },
  { date: '2024-03-10', desc: '使用新护肤品后出现过敏，停用后症状消失。' }
])

function handlePhotoChange(file) {
  const reader = new FileReader()
  reader.onload = e => {
    skinInfo.photoUrl = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

function saveSkinInfo() {
  ElMessage.success('皮肤档案保存成功！')
}
</script>

<style scoped>
.skin-archive-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 50px);
  padding-bottom: 70px;
  max-width: 600px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h3 {
  font-size: 22px;
  color: #333;
}

.section-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.skin-photo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #eee;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 80px;
  text-align: center;
}

.history-content {
  font-size: 15px;
  color: #555;
}
</style>